<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    svg {
      border: solid 2px black;
    }
  </style>
  <body>
    <svg width="600" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect id="MyRect" width="100" height="100" fill="red">
        <animate href="#MyRect" attributeName="x" from="0" to="500" dur="2s" id="rectAnimate" />
      </rect>
      <!-- <circle id="myCircle" cx="100" cy="200" r="50" fill="yellow">
        <animate href="#myCircle" begin="rectAnimate.end +2s" attributeName="cx" from="100" to="500" dur="2s" id="circleAnimate" />
      </circle> -->
      <!-- begin: 可设置多个属性 用分号隔开 相当于 ||    -->
      <!-- <circle id="myCircle" cx="100" cy="200" r="50" fill="yellow">
        <animate href="#myCircle" begin="3s;click" attributeName="cx" from="100" to="500" dur="2s" id="circleAnimate" end="2s"  end="click"/>
      </circle> -->
      <!-- indefinite: 由外部脚本控制 -->
      <circle id="myCircle" cx="100" cy="200" r="50" fill="yellow">
        <animate href="#myCircle" begin="indefinite" attributeName="cx" from="100" to="500" dur="2s" id="circleAnimate" />
      </circle>
    </svg>

    <div id="btn">点击</div>
    <script>
      const btn = document.getElementById('btn')
      btn.addEventListener('click', () => {
        const circleAnimate = document.getElementById('circleAnimate')
        circleAnimate.beginElement()
      })
    </script>
  </body>
</html>
